<template>
    <div class="header">
        <div class="flex-1-9 flex-center">
            <div>
                <mt-badge class="header-message-num" size="small" type="error">10</mt-badge>
                <i class="fa fa-envelope-o fa-lg" aria-hidden="true" @click="show"></i>
            </div>
            <div>
                <mt-search v-model="value" cancel-text="取消" placeholder="搜索">
                </mt-search>
            </div>
        </div>
        <mt-navbar v-model="selectedTab">
            <mt-tab-item @click.native="click(item)" v-for="item in tabs" :key="item.code" :id="item">{{item.name}}
            </mt-tab-item>
        </mt-navbar>
        <mt-popup v-model="popupVisible" popup-transition="popup-fade" class="pop">
            <div class="pop-container">
                <mt-header title="消息列表">
                    <!--<router-link slot="left">-->
                    <mt-button slot="left" icon="back" @click="hidden">返回</mt-button>
                    <!--</router-link>-->

                </mt-header>
                <mt-cell title="高炉" is-link value="带链接" :label="msg">
            </mt-cell>
                <mt-cell title="焦化" is-link value="带链接" :label="msg">
                </mt-cell>
                <mt-cell title="烧结" is-link value="带链接" :label="msg">
                </mt-cell>
                <mt-cell title="原料" is-link value="带链接" :label="msg">
                </mt-cell>
                <mt-cell title="高炉" is-link value="带链接" :label="msg">
                </mt-cell>
                <mt-cell title="焦化" is-link value="带链接" :label="msg">
                </mt-cell>
                <mt-cell title="烧结" is-link value="带链接" :label="msg">
                </mt-cell>
                <mt-cell title="原料" is-link value="带链接" :label="msg">
                </mt-cell>

            </div>

        </mt-popup>
    </div>

</template>

<script>
  export default {
    name: "commonHeader",
    data() {
      return {
        value: "",
        selectedTab: {},
        popupVisible: false,
        msg: '1-7H号焦炉，炉温正常,1-7H号焦炉，炉温正常,1-7H号焦炉，炉温正常,1-7H号焦炉，炉温正常',
        tabs: [
          {
            name: "原料",
            code: "material",
            path: "materialHome"
          },
          {
            name: "烧结",
            code: "firing",
            path: "firingHome"
          },
          {
            name: "焦化",
            code: "cooking",
            path: "cookingHome"
          },
          {
            name: "高炉",
            code: "furnace",
            path: "furnaceHome"
          }
        ]
      };
    },
    created: function () {
      const {tabs = []} = this;
      const path = this.$route.path;

      tabs.forEach(item => {
        path.indexOf(item.code) > -1 && (this.selectedTab = item);
      });
    },
    methods: {
      click: function (tab) {
        const lang = localStorage.language || "cn";
        const path = tab.path;

        path &&
        this.$router.push({
          path: `/${lang}/system/${path}`
        });
      },
      show: function () {
        this.popupVisible = true;
      },
      hidden: function () {
        this.popupVisible = false;
      }
    }
  };
</script>
<style lang="scss" scoped>
    .header {
        margin-bottom: 4px;
    }

    .mint-search {
        //mintui中搜索框的高度为视窗高度，不符合需求
        height: inherit;
    }

    .flex-1-9 {
        display: flex;
        & > div {
            flex: 1;
        }
        div:nth-child(1) {
            text-align: center;
        }
        div:nth-child(2) {
            flex: 9;
        }
    }

    .header-message-num {
        position: absolute;
        margin-left: 8px;
        margin-top: -4px;
        padding: 2px;
    }

    .pop-container {
        width: 100%;
        height: 100%;
        background: #ffffff;
        & > p {
            padding: 10px;
            line-height: 30px;
            & > i {
                color: #26a2ff;
                margin-right: 10px;
            }
        }
    }

    .pop {
        width: 100%;
        height: 100%;
    }

</style>

